{% extends 'layout.html' %}
{% load static %}

{% block conten  %}
    <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">折线图</div>
          <div class="panel-body">
            <div id="m1" style="height: 300px;width: 100%;"></div>
          </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="panel panel-default">
              <div class="panel-heading">柱状图</div>
              <div class="panel-body">
                <div id="m2" style="width: 100%; height: 400px;"></div>
              </div>
        </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
              <div class="panel-heading">饼图</div>
              <div class="panel-body">
                <div id="m3" style="width: 100%;height: 400px;"></div>
              </div>
        </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <script type="text/javascript">
        $(function() {
            initBar();
            initPie();
            initLine();
        })


            // 折线图
        function initLine() {
            var chartDom = document.getElementById('m1');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
              title: {
                text: '神武文化 广西分公司',
                  left:"center"
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: [],  //后台获取
                bottom:0
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
              },
              yAxis: {
                type: 'value'
              },
              series: []
            };

            $.ajax({
                url:'/chart/line/',
                get:'get',
                dataType: 'JSON',
                success:function(res){
                    if (res.status){
                        option.legend.data =  res.data.legend;
                        option.xAxis.data = res.data.x_axis;
                        option.series = res.data.series_list;
                        option && myChart.setOption(option);
                    }
                }
            })



        }

        // 初始化柱状图
        function initBar(){
            var chartDom = document.getElementById('m2');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar'
                }
              ]
            };

        option && myChart.setOption(option);
    }

            // 初始化饼状图
        function initPie(){
            var chartDom = document.getElementById('m3');
            var myChart = echarts.init(chartDom);
            var option;
             option = {
              title: {
                text: '部门预算占比',
                subtext: '融安分公司',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                bottom:0
              },
              series: [
                {
                  name: '预算',
                  type: 'pie',
                  radius: '50%',
                  data: [],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

                $.ajax({
                    url: '/chart/pic/',
                    type: 'get',
                    data:[],
                    dataType:'JSON',
                    success: function(res){
                       if (res.status){
                           option.series[0].data = res.data;
                           option && myChart.setOption(option);
                       }
                    }

                })
        }



    </script>
{% endblock %}

